<template>
	<view class="wrapoer">
		<!-- 电影信息 -->
		<div class="bfff">
			<div class="align-start">
				<image :src="chooseMovice.poster" mode="aspectFill" class="cover mr20"></image>
				<div class="flex1">
					<div class="center mt5">
						<div class="flex1 f35 fbold c333">{{chooseMovice.movieName}} </div>
						<!-- <u-icon name="clock" color="#FF5555" size="12"></u-icon>
						<div class="ctheme f24 ml5">03:53</div> -->
					</div>
					<div class="f26 c666 mt20 mb15">{{plan.startTime}}—{{plan.endTime}}（{{plan.showVersionType}}）</div>
					<div class="f26 c666  mb15">{{cinemaDetail.cinemaName}}</div>
					<div class="f26 c666 zuo">{{plan.hallName}} <text class="c999"
							v-for="v in seats">{{v.row}}排{{v.column}}号</text></div>
				</div>
			</div>
			<div class="tips flex-start f26">
				<div class="tip center">
					<u-icon name="close-circle" color="#FF5555" size="18"></u-icon>
					<div class="ml10 mr20">不支持退款</div>
				</div>
				<div class="tip center">
					<u-icon name="close-circle" color="#FF5555" size="18"></u-icon>
					<div class="ml10 mr20">不支持改签</div>
				</div>
			</div>
			<div class="align-start f26">
				<div class="c666 mr30 ml40">影院</div>
				<div class="flex1">
					<div class="f26 mb15 fbold">{{cinemaDetail.cinemaName}}</div>
					<div class="c999 f26">{{cinemaDetail.address}}</div>
				</div>
			</div>
		</div>
		<!-- 换座和优惠卷 -->
		<div class="bfff mt30 mb30 f26">
			<!-- <div class="center">
				<div class="flex1">
					<div class="f32 fbold mb10">自动换座 </div>
					<div class="c999 f22">当选择的座位已出售时自动选择最佳观影位</div>
				</div>
				<u-switch size="20" v-model="value" activeColor="#FF5555"></u-switch>
			</div> -->
			<!-- <div class="hr"></div>
			<div class="center">
				品成卡 <text class="c999 flex1">(余额 5689元)</text> 已抵扣 -10元
			</div>
			 <div class="hr"></div>-->

			<div class="center" v-if="movieCoupo.length==0" @click="sToast('您暂无优惠券')">
				<div class="flex1">优惠劵</div>
				<div class="c999 mr5">暂无优惠卷</div><u-icon name="arrow-right" color="#999" size="14"></u-icon>
			</div>
			<div class="center" v-else @click="show=true">
				<div class="flex1">优惠劵</div>

				<div class="ctheme mr5" v-if="discount.total">-￥{{discount.total}}</div>
				<div class="c999 mr5" v-else>{{disNum}}张优惠卷</div>
				<u-icon name="arrow-right" color="#999" size="14"></u-icon>
			</div>
		</div>
		<!-- 超值换购 -->
		<!-- <div class="bfff mb50">
			<div class="f32 fbold">超值换购 </div>
			<div class="center mt40" v-for="v in 2">
				<div class="flex1">
					<u-tooltip text="下方显示" direction="bottom">
						<template #title>
							<div class="f28 flex-start">
								<div class="mr5 ctheme">智享98元品成卡</div>
								<u-icon name="question-circle" color="#999" size="14"></u-icon>
							</div>
						</template>
						<template #text>
							<div class="cfff f22 discount">
								<div class="space-between mb10">
									<div>票价</div>
									<div>￥36.9</div>
								</div>
								<div class="space-between mb10">
									<div>影城卡</div>
									<div>- ￥6.9</div>
								</div>
								<div class="space-between mb10">
									<div>特惠活动</div>
									<div>- ￥4.9</div>
								</div>
							</div>
						</template>
					</u-tooltip>
					<div class="f26 mt20">￥3.9</div>
				</div>
				<u-icon name="checkmark-circle" color="#999" size="20"></u-icon>
				<u-icon name="checkmark-circle-fill" color="#FF5555" size="20"></u-icon>
			</div>

		</div> -->
		<div class="f32 fbold alert-title">购票须知 </div>
		<div class="align-start f28 alert-text">
			<u-icon name="checkmark-circle-fill" color="#FF5555" size="20" v-if="agree" @click="agree=false"></u-icon>
			<u-icon name="checkmark-circle" color="#999" size="20" v-else @click="agree=true"></u-icon>
			<div class="flex1 ml15 line15 c999">
				付款成功后 5-40
				分钟为您出票，此电影票为特价电影票请确认时间和场次无误，付款成功后将无法退票和改签。如果无法出票，系统会原路退款。出票成功后系统会通过公众号提醒您，点击进入查看取票信息，在影院任意取票机可取票。下单即代表您同意<text
					class="ctheme">《用户购票协议》</text>
			</div>
		</div>
		<div class="posf bottom center">
			<!-- <div class="flex1">
				<div class="ctheme mb15 f32 fbold"><text class="f22">￥</text>{{payAmount}}</div> 
				<div class="c999 f22"  >
					<text class="f22"  v-if="discount.total">优惠券抵扣{{discount.total}}元 </text>
			   </div>  
			</div> -->
			<div class="flex1">
				<div class="ctheme mb15 f32 fbold"><text class="f22">￥</text>{{czje}} <text class="c999 f24" :class="czje<payAmount?'scx':'yc'">￥{{payAmount}}</text></div> 
				<div class="c999 f22"  >
					<text class="f22"  v-if="discount.total">优惠券抵扣{{discount.total}}元 </text>
					<text class="f22" v-if="dkje"> 积分抵扣{{dkje}}元</text>
			   </div>  
			</div>
			<div class="btheme bth-red" @click="showPhoneFun">立即付款</div>
		</div>
		<!-- 选择优惠券 -->
		<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
			<view class="discount-main">
				<div class="center mb30">
					<div class="f33 flex1 c333 fbold">使用优惠券</div>
					<u-icon name="close-circle" color="#999" size="23" @click="close"></u-icon>
				</div>
				<u-tabs lineColor="#FF5555" :list="list1" @click="tabClick"></u-tabs>
				<div class="discount-scroll">
					<div class="mt20 discount center" v-for="v in (coupoIndex==0?movieCoupo.djqs:movieCoupo.gyqs)"
						:key="v.id" @click="getOrderDiscount(v)">
						<div class="price-box ">
							<div class="ctheme mb10 align-end">
								<div class="f20">￥</div>
								<div class="f40 fbold">{{v.balance}}</div>
								<div class="c999 f24 " :class="v.balance<v.total?'scx':'yc'" >￥{{v.total}}</div>
							</div>
							<!-- <div class="c999 f24">满10元可用</div> -->
						</div>
						<div class="flex1">
							<div class="f28 mb20">{{v.mc}}</div>
							<div class="f24">有效期至{{v.endTime}}</div>
						</div>
						<u-icon name="checkmark-circle-fill" color="#FF5555" size="20" v-if="v.check"></u-icon>
						<u-icon name="checkmark-circle" color="#999" size="20" v-else></u-icon>
					</div>
				</div>
			</view>

		</u-popup>


		<!-- 输入验证码 -->
		<u-popup :show="showPhone" :round="10" mode="bottom" @close="close" @open="open">
			<div class="box2 posr">
				<div class="mb50">
					<div class="f32 fbold mb30 ml30">手机号</div>
					<input maxlength="11" type="number" placeholder="请输入手机号" placeholder-style="color:#CFCFCF"
						class="phone" v-model="uInfo.phone" disabled="true" />
				</div>
				<div class="mb50">
					<div class="f32 fbold mb30 ml30">验证码</div>
					<div class="phone space-between">
						<input type="number" placeholder="请输入手机验证码" placeholder-style="color:#CFCFCF"
							v-model="phoneCode" />
						<div class="text1 f24" @click="getPhoneVcode" v-if="time==60">获取验证码</div>
						<div class="text1 f24" v-else>{{time}}</div>
					</div>
				</div>
				<div class="f30 center btn cfff" @click="pay">确认支付</div>
			</div>

		</u-popup>
		<!-- 输入验证码 -->
		<u-popup :show="bindCardno" :round="10" mode="bottom" @close="close" @open="open">
			<div class="box2 posr">
				 <div class="mb50">
				 	<div class="f32 fbold mb30 ml30 scgp" >首次购票请先完成实名认证</div> 
				 </div>
				<div class="mb50">
					<div class="f32 fbold mb30 ml30">真实姓名</div>
					<input maxlength="20" type="text" placeholder="请输入真实姓名" placeholder-style="color:#CFCFCF"
						class="phone"  v-model="name" />
				</div>
				 <div class="mb50">
				 	<div class="f32 fbold mb30 ml30">身份证号</div>
				 	<input maxlength="18" type="text" placeholder="请输入身份证号" placeholder-style="color:#CFCFCF"
				 		class="phone"  v-model="cardno" />
				 </div>
				<div class="f30 center btn cfff" @click="doConfirmCard">认证</div>
			</div>
		
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: true,
				show: false,
				seats: [],
				chooseMovice: {},
				plan: {},
				cinemaDetail: {},
				uInfo: {},
				// 选中的优惠卷信息
				discount: {
					total:0 
				},
				balance:0,
				agree: false,
				showId: '',
				movieCoupo: {
					djqs: [],
					gyqs: []
				},
				coupoIndex: 0,
				time: 60,
				phoneCode: '',
				showPhone: false,
				bindCardno: false,
				cardno: '',
				name: '',
				outTradeNo: '',
				couponId: {
					coupoIndex: 0,
					couponIds: []
				},
				list1: [{
					name: '储值卡',
				}, {
					name: '次卡',
				}]
			};
		},
		onLoad(e) {
			this.showId = e.showId
			this.seats = uni.getStorageSync('seats')
			this.uInfo = uni.getStorageSync('uInfo')
			this.chooseMovice = uni.getStorageSync('chooseMovice')
			this.plan = uni.getStorageSync('plan')
			this.cinemaDetail = uni.getStorageSync('cinemaDetail').data
			this.getMovieCoupon()
			
			this.$http('/api/queryHyscore', {
				phone: wx.getStorageSync('uInfo').phone,
				payAmount:this.payAmount
			}).then((r) => {
				 this.balance = r.data;
			})
		},
		computed: {
			// 优惠券总数
			disNum() {
				return this.movieCoupo.djqs.length + this.movieCoupo.gyqs.length
			},
			// 座位总额
			totalAmount() {
				let total = 0
				this.seats.map(v => {
					total += v.price * 1
				})
				return parseFloat(total).toFixed(2);
			},
			payAmount() {
				let total = 0
				this.seats.map(v => {
					total += v.price * 1
				})
				if (this.discount.total) {
					total -= this.discount.total
				}

				return parseFloat(total).toFixed(2);
			},
			dkje() {
				let dkje = 0
				 if(this.balance>this.payAmount){
					 dkje  = this.payAmount;
				 }else{
					 dkje = this.balance;
				 } 
				 console.log("dkje="+dkje)
				return parseFloat(dkje).toFixed(2);
			},
			czje() {
				let czje = 0
				czje = this.payAmount - this.dkje 
			 
				return parseFloat(czje).toFixed(2);
			} 
		},
		methods: {
			tabClick(e) {
				// console.log(e)
				this.coupoIndex = e.index
			},
			// 计算下单折扣的金额
			getOrderDiscount(v) {
				let seatPrices = this.seats.map(v => {
					return v.price
				})
				seatPrices = seatPrices.join('|')
				// 选择类型和之前不一样,清空所有选中
				if (this.couponId.coupoIndex != this.coupoIndex) {
					this.couponId.coupoIndex = this.coupoIndex
					this.couponId.couponIds = []
					this.movieCoupo.djqs = this.movieCoupo.djqs.map(r => {
						r.check = false
						return r
					})
					this.movieCoupo.gyqs = this.movieCoupo.gyqs.map(r => {
						r.check = false
						return r
					})
				}
				// 如果是观影券也清空
				if (this.coupoIndex == 1) {
					this.movieCoupo.gyqs = this.movieCoupo.gyqs.map(r => {
						r.check = false
						return r
					})
				}
				v.check = !v.check
				let list = this.coupoIndex == 0 ? this.movieCoupo.djqs : this.movieCoupo.gyqs
				this.couponId.couponIds = list.filter(r => {
					return r.check
				})
				this.couponId.couponIds = this.couponId.couponIds.map(r => {
					return r.id
				})
				this.$http('/api/movie/orderDiscount', {
					phone: this.uInfo.phone,
					couponId: this.couponId.couponIds.join('|'),
					seatPrices,
					totalAmount: this.totalAmount
				}, false, 'POST').then((r) => {
					this.discount = {
						id: v.id,
						total: r.data.discountAmount  
					}
				})

			},
			showPhoneFun() {
				if(this.uInfo.name==''){
 				   this.bindCardno = true
					return;	
				}
				if (!this.agree) {
					this.sToast('请阅读并同意购票须知')
					return
				}
			  this.showPhone = true;  
			// this.$http('/api/scoreisEnough', {
			// 		phone: wx.getStorageSync('uInfo').phone,
			// 		payAmount:this.payAmount
			// 	}).then((r) => {
			// 		if(r.data==1){
			// 		  this.showPhone = true;  
			// 		}else{ 
			// 		  uni.showModal({
			// 		  		title: '提示',
			// 		  		// 提示文字
			// 		  		content: '积分不足，请先充值积分！',
			// 		  		// 取消按钮的文字自定义
			// 		  		cancelText: "再想想",
			// 		  		// 确认按钮的文字自定义
			// 		  		confirmText: "立即充值",
			// 		  		//删除字体的颜色
			// 		  		confirmColor:'#000000',
			// 		  		//取消字体的颜色
			// 		  		cancelColor:'#c2c2c2',
			// 		  		success: function(res) {
			// 		  		if (res.confirm) {
			// 		  			// 执行确认后的操作
			// 					uni.navigateTo({
			// 						url: '../woDe/chongZhi'
			// 					})
			// 		  		} 
			// 		  		else {
			// 		  			// 执行取消后的操作
			// 		  		}
			// 		  	}
			// 		  })
					  
			// 		}
			// 	})
		 
			},
			 
			doConfirmCard(){
				this.$http('/api/bindIdCard', {
					cardno: this.cardno,
					name: this.name, 
				}, false, 'POST', false).then((r) => {
					uni.hideLoading()
					this.uInfo.name=this.name;
					uni.setStorageSync('uInfo',this.uInfo)
					this.sToast('认证成功')
					this.bindCardno = false
					this.showPhone = true
				}).catch(e => {
					uni.showModal({
						title: '认证失败,请核对身份信息',
						content: e.msg,
						showCancel: false
					})
					uni.hideLoading()
				})
			},
		 
			// 电影票订单⽀付(积分余额⽀付)
			pay() {
				 let that = this;
				if (!this.phoneCode) {
					this.sToast('请输入支付验证码')
					return
				} 
				uni.showLoading({
					title: '正在支付中...'
				})
				that.sumitOrder();
				// if(this.czje>0){
				// 	wx.login({
				// 		success(res) {
				// 			if (res.code) {
				// 				that.$http('/api/weChat/recharge', {
				// 					totalFee: that.czje,
				// 					phone: wx.getStorageSync('uInfo').phone,
				// 					code: res.code
				// 				}, true, 'POST').then((r) => {
				// 					r.data.paySign = r.data.sign
				// 					this.outTradeNo =  r.data.outTradeNo
				// 					wx.requestPayment({
				// 						...r.data,
				// 						success: (r) => {
				// 						    //立马查询状态
				// 							that.queryPayOrder();
				// 							that.sumitOrder();
				// 						},
				// 						fail: (r) => {
				// 						this.sToast('支付失败');
				// 						}
				// 					})
				// 				})
				// 			} else {
				// 				console.log('登录失败！' + res.errMsg)
				// 			}
				// 		}
				// 	})
				// }else if(this.czje==0){
				// 	uni.showLoading({
				// 		title: '正在支付中...'
				// 	})
				// 	that.sumitOrder();
				// }else{
					
				// }
			 
				
			},
			queryPayOrder(){
				this.$http('/api/queryPayOrder', {
					outTradeNo: this.outTradeNo,
 				}, false, 'POST', false).then((r) => {
			 
				}).catch(e => {
					 
				})
			},
			sumitOrder(){ 
				let seatNames = [],
					seatIds = []
				this.seats.forEach(v => {
					seatNames.push(v.name)
					seatIds.push(v.seatId)
				})
					// if(this.czje>0){
				let that = this 
				wx.login({
					success(res) {
						if (res.code) {
							that.$http('/api/movie/pay', {
								phone: that.uInfo.phone,
								movieName: that.chooseMovice.movieName,
								cinema: that.cinemaDetail.cinemaName,
								showStartTime: that.plan.startTime,
								hallName: that.plan.hallName,
								showId: that.showId,
								seatNames: seatNames.join('|'),
								seatIds: seatIds.join('|'),
								totalAmount: that.totalAmount,
								couponId: that.couponId.couponIds.join('|'),
								discountAmount: that.discount.total || '',
								payAmount: that.payAmount,
								phoneCode: that.phoneCode,
								payMoney: that.czje,
								code: res.code
							}, true, 'POST').then((r) => {
								if(r.code==0){
									if(that.czje>0){
										r.data.paySign = r.data.sign
										wx.requestPayment({
											...r.data,
											success: (r) => {
												uni.hideLoading()
												that.sToast('支付成功')
												uni.navigateTo({
													url: './chengGong'
												})
											},
											fail: (r) => {
												uni.showModal({
													title: '支付失败',
													content: e.msg,
													showCancel: false
												})
												uni.hideLoading()
											}
										})
									}else{
										uni.hideLoading()
										that.sToast('支付成功')
										uni.navigateTo({
											url: './chengGong'
										})
									}
								}else{
									uni.showModal({
										title: '支付失败',
										content: e.msg,
										showCancel: false
									})
									uni.hideLoading()
								}
								
								
								
							})
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
				
				
				// this.$http('/api/movie/pay', {
				// 	phone: this.uInfo.phone,
				// 	movieName: this.chooseMovice.movieName,
				// 	cinema: this.cinemaDetail.cinemaName,
				// 	showStartTime: this.plan.startTime,
				// 	hallName: this.plan.hallName,
				// 	showId: this.showId,
				// 	seatNames: seatNames.join('|'),
				// 	seatIds: seatIds.join('|'),
				// 	totalAmount: this.totalAmount,
				// 	couponId: this.couponId.couponIds.join('|'),
				// 	discountAmount: this.discount.total || '',
				// 	payAmount: this.payAmount,
				// 	phoneCode: this.phoneCode,
				// 	payMoney: 0, 
				
				// }, false, 'POST', false).then((r) => {
				// 	uni.hideLoading()
				// 	this.sToast('支付成功')
				// 	uni.navigateTo({
				// 		url: './chengGong'
				// 	})
				// }).catch(e => {
				// 	uni.showModal({
				// 		title: '支付失败',
				// 		content: e.msg,
				// 		showCancel: false
				// 	})
				// 	uni.hideLoading()
				// })
			},
			// 10、查询用户所拥有的电影优惠券
			getMovieCoupon() {
				this.$http('/api/getMovieCoupon', {
					phone: wx.getStorageSync('uInfo').phone
				}).then((r) => {
					this.movieCoupo = r.data
				})
			},
			// 获取支付验证码
			getPhoneVcode() {
				uni.showLoading({
					title: '正在发送中'
				})
				this.$http('/api/getPayPhoneVcode', {
					phone: wx.getStorageSync('uInfo').phone
				}).then((r) => {
					uni.hideLoading()
					this.sToast('发送成功！')
					this.setTime()
				})
			},
			setTime() {
				let that = this
				if (this.time == 0) {
					this.time = 60
					return
				}
				this.time--
				setTimeout(() => {
					that.setTime()
				}, 1000)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.showPhone = false				
				this.bindCardno = false				
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapoer {
		padding: 50rpx 20rpx;

		.box2 {
			padding: 70rpx 30rpx;
			.scgp {
				color: red;
			}	
			.phone {
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 16rpx 0rpx #FDE9EA;
				border-radius: 13rpx 13rpx 13rpx 13rpx;
				border: 1rpx solid #FDE9EA;
				padding: 0 50rpx 0 50rpx;
			}

			.text1 {
				color: #FF5555;
			}

			.btn {
				width: 573rpx;
				height: 90rpx;
				background: linear-gradient(to right, #FF5858, #F857A5);
				border-radius: 45rpx 45rpx 45rpx 45rpx;
				margin: 0 auto;
			}
		}
.scx {
			text-decoration:line-through;
		}	
		.yc {
			display: none;
		}
		.discount-main {
			padding: 40rpx 37rpx 0;
		.scx {
			text-decoration:line-through;
		}	
		.yc {
			display: none;
		}
			.price-box {
				width: 130rpx;
				margin-right: 90rpx;
			}

			.discount-scroll {
				max-height: 50vh;
				overflow-y: scroll;
				padding-bottom: 50rpx;
			}

			.discount {
				height: 170rpx;
				background: url(../../static/discount.png) no-repeat center;
				background-size: 100% 100%;
				padding: 0 20rpx 0 40rpx;
			}
		}

		.bth-red {
			width: 220rpx;
			height: 80rpx;
			border-radius: 40rpx;
		}

		.bottom {
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
			background: #fff;
		}

		.alert-text {
			margin: 25rpx 30rpx 200rpx;
		}

		.alert-title {
			margin: 0 35rpx;
		}

		.hr {
			border-top: 1rpx solid #e8e8e8;
			margin: 25rpx 0;
		}

		.tips {
			height: 90rpx;
			margin: 60rpx 15rpx 40rpx;
			border-top: 1rpx dashed #e8e8e8;
			border-bottom: 1rpx dashed #e8e8e8;
		}

		.zuo {
			line-height: 1.2;
		}

		.cover {
			width: 140rpx;
			height: 200rpx;
			border-radius: 8rpx;
		}

		.bfff {
			border-radius: 15rpx;
			padding: 30rpx 20rpx;
		}
	}
</style>